<!--分店管理组件-->
<template>
    <div v-loading="loading" style="width: 100%; height: 600px">
      <!--查询框-->
      <div>
        <el-select v-model="selectID" placeholder="请选择">
          <el-option
            v-for="item in cityInfo"
            :key="item.cityID"
            :label="item.cityName"
            :value="item.cityID">
          </el-option>
        </el-select>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button round @click="addShop" v-if="isShopShowAdd">添加新店铺</el-button>
      </div>
      <!--店铺卡片展示-->
      <el-row>
        <el-col :span="5" v-for="(item, key) in shopInfoSelect" :key="key" style="margin:22px 20px 0px 22px;">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <div style="padding: 10px 0px 0px 10px;  text-align: left">
              <h4>{{item.chain}}</h4>
              <div style="color: #ccc; text-align: left; margin-top: 10px">
                <h5>店长：{{item.shopKeeper}}</h5>
                <h5>电话：{{item.shopTel}}</h5>
              </div>
            </div>
            <div style="padding: 14px;">
              <div class="bottom clearfix">
                <el-button type="success" icon="el-icon-check" circle @click="showShopInfo(item)" ></el-button>
                <el-button type="primary" icon="el-icon-edit" circle v-if="isShopShowEdit" @click="editShopInfo(item)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle v-if="isShopShowDel" @click="delShopInfo(item)"></el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-dialog title="分店详细信息" :visible.sync="isShopDetailed">
        <div style="text-align: left">
          <div style="margin-top: -30px; margin-bottom: 10px">
            <h1>{{shopInfoItem.chain}}</h1>
          </div>
          <el-row>
            <el-col :span="5" :offset="4">
              <div style="text-align: left; margin-top: 10px">
                <div class="shop-item-title">
                  <label>店铺ID</label>
                </div>
                <div style="margin-top: 10px">
                  {{shopInfoItem.shopId}}
                </div>
              </div>
            </el-col>
            <el-col :span="5" :offset="4">
              <div style="text-align: left; margin-top: 10px">
                <div class="shop-item-title">
                  <label>电话</label>
                </div>
                <div style="margin-top: 10px">
                  {{shopInfoItem.shopTel}}
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20" :offset="4">
              <div style="text-align: left; margin-top: 10px">
                <div class="shop-item-title">
                  <label>地址</label>
                </div>
                <div style="margin-top: 10px">
                  {{shopInfoItem.shopAddress}}
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5" :offset="4">
              <div style="text-align: left; margin-top: 10px">
                <div class="shop-item-title">
                  <label>店长</label>
                </div>
                <div style="margin-top: 10px">
                  {{shopInfoItem.shopKeeper}}
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div slot="footer" class="dialog-footer" style="margin-top: -30px; margin-right: 20px">
          <el-button type="success" @click="isShopDetailed = false">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="编辑分店信息" :visible.sync="isShopEditDetailed" top="130px">
        <div style="width: 500px; margin-left: 10%; margin-top: -25px; margin-bottom: -20px">
          <el-form label-width="80px" :model="formShop">
            <el-form-item label="店铺名称">
              <el-input v-model="formShop.chain"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="formShop.shopTel" placeholder="028-12345678"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="formShop.shopAddress"></el-input>
            </el-form-item>
            <el-form-item label="店长">
              <el-input v-model="formShop.shopKeeper"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitShop(formShop)">更新</el-button>
              <el-button @click="onSubmitCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>

      <el-dialog title="添加分店信息" :visible.sync="isShopAddDetailed" top="150px">
        <div style="width: 500px; margin-left: 5%; margin-top: -25px; margin-bottom: -20px">
          <el-form label-width="150px" :model="formShop">
            <el-form-item label="店铺名称 (必填)">
              <el-input v-model="formShop.chain" required></el-input>
            </el-form-item>
            <el-form-item label="电话 (必填)">
              <el-input v-model="formShop.shopTel" type="tel" maxlength="13" placeholder="028-12345678" oninput ="value=value.replace(/[^\d\-\d]/g,'')" required></el-input>
            </el-form-item>
            <el-form-item label="地址 (必填)">
              <el-input v-model="formShop.shopAddress" required></el-input>
            </el-form-item>
            <el-form-item label="店长 (必填)">
              <el-input v-model="formShop.shopKeeper" required></el-input>
            </el-form-item>
<!--            <el-form-item label="经理">-->
<!--              <el-input v-model="formShop.shopManager"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="美容师">-->
<!--              <el-input v-model="formShop.shopBeautician"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="销售">-->
<!--              <el-input v-model="formShop.shopSalesperson"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="普通员工">-->
<!--              <el-input v-model="formShop.shopNormalEmp"></el-input>-->
<!--            </el-form-item>-->
            <el-form-item>
              <el-button type="primary" @click="onSubmitAddShop(formShop)">添加</el-button>
              <el-button @click="onSubmitCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>

    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "ChainIndex",
      mounted() {
          this.getShop();
      },
      methods:{
        // 查询按钮触发的方法
        query(){
          // 讲选择栏，选择的结果，进行匹配查询，满足结果赋值再遍历显示
          let info = [];
          let map = this.shopInfo.forEach(v => {
            let chainshop = v.chain;
            let selectCity = '所有分店';
            this.cityInfo.forEach((option)=>{
              if(option.cityID == this.selectID){
                selectCity = option.cityName;
                return;
              }
            });
            if (selectCity == '所有分店'){
              let vote = {};
              vote.shopId = v.shopId;
              vote.chain = v.chain;
              vote.shopTel = v.shopTel;
              vote.shopAddress = v.shopAddress;
              vote.shopKeeper = v.shopKeeper;
              vote.shopManager = v.shopManager;
              vote.shopBeautician = v.shopBeautician;
              vote.shopSalesperson = v.shopSalesperson;
              vote.shopNormalEmp = v.shopNormalEmp;
              info.push(vote)
            }else if (chainshop.indexOf(selectCity.substr(0,2)) != -1){
              let vote = {};
              vote.shopId = v.shopId;
              vote.chain = v.chain;
              vote.shopTel = v.shopTel;
              vote.shopAddress = v.shopAddress;
              vote.shopKeeper = v.shopKeeper;
              vote.shopManager = v.shopManager;
              vote.shopBeautician = v.shopBeautician;
              vote.shopSalesperson = v.shopSalesperson;
              vote.shopNormalEmp = v.shopNormalEmp;
              info.push(vote)
            }
          });
          this.shopInfoSelect = info;
        },

        // 展示店铺详细信息
        showShopInfo(item){
          this.shopInfoItem = item;
          this.isShopDetailed = true;
        },

        // 展示编辑信息的弹出框
        editShopInfo(item){
          this.formShop = item;
          this.isShopEditDetailed = true;
        },

        // 提交修改完成的信息
        onSubmitShop(v){
          let chainName = v.chain;
          if(!this.verification(v)){
            this.$message({
              message: '信息填写有误！',
              center: true,
              type: 'error'
            });
          }else {
            this.axios({
              url: '/api/chain',
              method: "put",
              data: JSON.stringify({
                chain: v.chain,
                shopTel: v.shopTel,
                shopAddress: v.shopAddress,
                shopKeeper: v.shopKeeper,
                shopId: v.shopId
              }),
              headers: {
                'Content-Type': 'application/json; charset=utf-8'
              }
            }).then((response) => {
              if (response.data.statusCode == "200") {
                this.$message({
                  message: '分店信息更新成功！',
                  center: true,
                  type: 'success'
                });
                this.getShop();
              } else {
                this.$message({
                  message: '分店信息更新失败！',
                  center: true,
                  type: 'error'
                });
                this.getShop();
              }
            });
          }
          this.isShopEditDetailed=false;
        },

        // 删除店铺信息
        delShopInfo(item){
          this.$confirm('此操作将永久注销店铺信息以及员工信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.axios.delete('/api/chain',{params:{shopId:item.shopId}}).then((response)=>{
              if (response.data.statusCode == "200"){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.getShop();
              }else {
                this.$message({
                  type: 'error',
                  message: '删除失败!'
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除!'
            });
          });
        },

        // 获取所有店铺信息
        getShop(){
          axios.post("/api/check",{passID: sessionStorage.getItem('passID')}).then((response)=> {
            if (response.data.statusCode == "200") {
              this.isShopShowAdd = response.data.data.isShopShowAdd; // 店铺添加权限
              this.isShopShowEdit = response.data.data.isShopShowEdit; // 店铺修改权限
              this.isShopShowDel = response.data.data.isShopShowDel; // 店铺删除权限
            }
          });
          this.axios({
            url: '/api/chain',
            method: "get"
          }).then((response)=>{
            if (response.data.statusCode == "200"){
              this.shopInfo = response.data.data;
              this.shopInfoSelect = response.data.data;
            }
            this.loading = false;
          });
        },

        // 添加新店铺的弹出框
        addShop(){
          this.formShop = {
            shopId: '',
            chain: '',
            shopTel: '',
            shopAddress: '',
            shopKeeper: '',
            // shopManager: '',
            // shopBeautician: '',
            // shopSalesperson:  '',
            // shopNormalEmp:  ''
          };
          this.isShopAddDetailed = true;
        },
        // 提交添加新店铺的信息

        onSubmitAddShop(v){
          if(!this.verification(v)){
            this.$message({
              message: '信息填写有误！',
              center: true,
              type: 'error'
            });
          }else {
            this.axios({
              url: '/api/chain',
              method: "post",
              data: JSON.stringify({
                chain: v.chain,
                shopTel: v.shopTel,
                shopAddress: v.shopAddress,
                shopKeeper: v.shopKeeper
              }),
              headers: {
                'Content-Type': 'application/json; charset=utf-8'
              }
            }).then((response)=>{
              if (response.data.statusCode == "200"){
                this.$message({
                  message: '分店信息添加成功！',
                  center: true,
                  type: 'success'
                });
                this.getShop();
              }else {
                this.$message({
                  message: '分店信息添加失败！',
                  center: true,
                  type: 'error'
                });
              }
            });
            this.isShopAddDetailed=false;
          }
        },
        // 取消
        onSubmitCancel(){
          this.formShop = {
            shopId: '',
              chain: '',
              shopTel: '',
              shopAddress: '',
              shopKeeper: '',
              shopManager: '',
              shopBeautician: '',
              shopSalesperson:  '',
              shopNormalEmp:  ''
          };
          this.isShopEditDetailed = false;
          this.isShopAddDetailed = false;
        },

        // 校验
        verification(v){
          // 空格校验
          let regEx = /^\s*$/;
          let regSpace = new RegExp(regEx);
          // 电话校验
          let reg = /^\d{3,4}-\d{7,8}$/;
          let regExp =  new RegExp(reg);
          let tel = v.shopTel;
          if(v.shopAddress == '' ||
            v.shopKeeper == '' ||
            v.chain == '' ||
            v.shopTel == '' ||
            !tel.match(regExp) ||
            v.shopAddress.match(regSpace) ||
            v.shopKeeper.match(regSpace) ||
            v.chain.match(regSpace) ||
            v.shopTel.match(regSpace)){
            return false;
          }
          return true;
        }
      },
      data(){
          return{
            // 权限
            isShopShowAdd:false,
            isShopShowEdit:false,
            isShopShowDel:false,
            // 统计有店铺的城市
            cityInfo:[
              {cityID: '00', cityName: '所有分店'},
              {cityID: '01', cityName: '成都市'},
              {cityID: '02', cityName: '绵阳市'},
              {cityID: '03', cityName: '自贡市'},
              {cityID: '04', cityName: '攀枝花市'},
              {cityID: '05', cityName: '泸州市'},
              {cityID: '06', cityName: '德阳市'},
              {cityID: '07', cityName: '广元市'},
              {cityID: '08', cityName: '遂宁市'},
              {cityID: '09', cityName: '内江市'},
              {cityID: '10', cityName: '乐山市'},
              {cityID: '11', cityName: '资阳市'},
              {cityID: '12', cityName: '宜宾市'},
              {cityID: '13', cityName: '南充市'},
              {cityID: '14', cityName: '达州市'},
              {cityID: '15', cityName: '雅安市'},
              {cityID: '16', cityName: '阿坝藏族羌族自治州'},
              {cityID: '17', cityName: '甘孜藏族自治州'},
              {cityID: '18', cityName: '凉山彝族自治州'},
              {cityID: '19', cityName: '广安市'},
              {cityID: '20', cityName: '巴中市'},
              {cityID: '21', cityName: '眉山市'}
            ],
            selectID: '',

            // 存储所有店铺信息
            shopInfo:[],
            shopInfoSelect:[],

            // 查看店铺详细信息
            isShopDetailed: false,
            shopInfoItem: '',

            // 编辑、添加店铺详细信息
            isShopEditDetailed: false,
            formShop: {
              shopId: '',
              chain: '',
              shopTel: '',
              shopAddress: '',
              shopKeeper: ''
            },

            // 删除店铺
            isShopDelDetailed: false,

            // 添加店铺
            isShopAddDetailed: false,

            // 加载
            loading:true
          }
      }
    }
</script>

<style scoped>
  .shop-item-title{
    border-left: #67c23a 5px solid;
    width: 100px;
    height: 20px;
    padding-left: 5px;
    font-weight: bold;
  }
</style>
